<template>
	<view class="footer-wrap">
		<view class="share-btn">
			<hm-share :templateData="templateData" />
		</view>
		<button v-if="showGenerateBtn" class="ss-reset-button generate-btn" @tap="getName">
			立即生成
		</button>
		<view class="download-wrap">
			<hm-pay 
      :price="props.templateData.downloadPrice" 
      :orderType="orderType"
      :isFromImageList="isFromImageList"
      :templateId="props.templateData.template_id"
      type="avatar"
      :buyText="buyText"
			:templateData="templateData" 
      ref="pay" 
      @paySuccess="paySuccess"
    />
		</view>
	</view>
</template>

<script setup>
	import hmShare from '@/common/components/hm-share/hm-share.vue';
	import hmPay from "@/common/components/hm-pay/hm-pay.vue";
	const vk = uni.vk;

	const props = defineProps({
		inputs: {
			type: Object,
			default: {}
		},
    orderType: {
      type: String,
      default: 'avatar'
    },
    buyText: {
      type: String,
      default: '去水印'
    },
		templateData: {
			type: Object,
			default: {}
		},
    showGenerateBtn: {
      type: Boolean,
      default: true
    },
		nameLength: {
			type: Number,
			default: 1
		},
		needRequest: {
			type: Boolean,
			default: false
		},
    isFromImageList: {
      type: Boolean,
      default: false
    }
	})
	const emits = defineEmits(['paySuccess', 'generate-success', 'generate-fail'])

	const paySuccess = (e) => emits('paySuccess', e);

	const getName = async () => {
		const inputs = props.inputs;
		if (!inputs) {
			return emits('generate-success');
		}
		let flag = true;
		Object.keys(inputs).forEach((key) => {
			const val = inputs[key];
			console.log(inputs, key, val);
			if (!val) {
				flag = false;
				emits('generate-fail', '姓氏不能为空！');
			}

			if (val.length > props.nameLength) {
				flag = false;
				emits('generate-fail', `文案不能超过为 ${props.nameLength} 个字!`)
			}
		});
		if (flag) {
			let names = {
				names1: [],
				names2: []
			};
			let res;
			if (props.needRequest) {
				try {
					res = await vk.callFunction({
						url: 'client/template/pub/getIdiom',
						title: '',
						data: {
							name1: inputs.name1,
							name2: inputs.name2,
						}
					})
				} catch (err) {
					emits('generate-fail', '生成失败,请稍后再试!')
				}
			}
			if (res && res.data) {
				names.names1 = JSON.parse(vk.myfn.HmUtils.Crypto.decrypt(res.data.name1));
				names.names2 = JSON.parse(vk.myfn.HmUtils.Crypto.decrypt(res.data.name2));
			}
			emits('generate-success', names);
		}
	}
</script>

<style lang="scss" scoped>
	.download-wrap {
		height: 90rpx;
		flex: 2;
	}

	.footer-wrap {
		width: 100vw;
		position: fixed;
		bottom: 0;
		padding-bottom: 10rpx;
		display: flex;
		align-items: center;
		background-color: #ffffff;
		border-top: 1px solid #ddd;
		padding: 15rpx 15rpx 40rpx;
		left: 0;
    z-index: 999;

		button {
			border-radius: 25px;
			font-weight: bold;
		}

		.share-btn {
			flex: 1;
			height: 90rpx;
			font-weight: bold;
			font-size: 32rpx;
			letter-spacing: 8;
			font-style: normal;
			font-weight: 500;
			color: #627AF8;
			border-radius: 38px;
			border-color: #627AF8;
		}

		.generate-btn {
			height: 90rpx;
			flex: 2;
			font-weight: bold;
			font-size: 32rpx;
			letter-spacing: 8;
			background: linear-gradient(90deg, #FF9E7D -2.35%, #FF6A60 100%);
			font-style: normal;
			font-weight: 500;
			color: #FFFFFF;
			margin: 0 30rpx;
			border-radius: 25px;
		}
	}
</style>